import { AtSearchBar, AtAccordion, AtButton, AtForm, AtInput, AtList, AtListItem, AtNavBar } from 'taro-ui';
import React from 'react';
import Taro from '@tarojs/taro'
import config from '../../config.json'
import { Navigator, View } from '@tarojs/components'

interface roomInfo {
    mid: number,
    name: string,
    area: string,
    projector: number,
    wifi: number,
    note: string,
    time: {
        start_time: number,
        end_time: number,
    }[],
}
class roomList extends React.Component<any, any>{
    constructor(...props) {
        super(props);
        this.state = {
            open: false,
            searchValue: '',
            array: [],
        };
    }
    click() {
        this.state.open ? this.setState({ open: false }) : this.setState({ open: true });
    }
    change(value) {
        this.setState({
            searchValue: value
        })
    }
    onActionClick() {
        console.log(this.state.searchValue);
        let _this = this;
        Taro.request({
            url: config.domainName + '/meetroom/query',
            method: 'GET',
            data: {
                search: _this.state.searchValue,
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        array: res.data.data,
                    });
                    console.log("获取成功!");
                    console.log(_this.state);
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }

            },
            fail() {
                console.log("获取失败!");
            }
        })
    }
    componentDidMount() {
        let _this = this;
        Taro.request({
            url: config.domainName + '/meetroom/query',
            method: 'GET',
            data: {
                search: '',
                id: '',
            },
            header: {
                token: Taro.getStorageSync('token'),
            },
            success(res) {
                if (res.data.code === 0) {
                    _this.setState({
                        array: res.data.data,
                    });
                    console.log("获取成功!");
                    console.log(_this.state);
                } else {
                    Taro.showToast({
                        title: '服务器异常',
                        icon: "error" as any
                    })
                }

            },
            fail() {
                console.log("获取失败!");
            }
        })
    }
    render() {
        return (
            <>
                <AtNavBar
                    onClickLeftIcon={() => {Taro.navigateBack()}}
                    color='#000'
                    title='会议室列表'
                    leftIconType="chevron-left"
                />
                <AtSearchBar
                    value={this.state.searchValue}
                    onChange={this.change.bind(this)}
                    onActionClick={this.onActionClick.bind(this)}
                />
                <AtList>
                    {
                        this.state.array.map((item: roomInfo) => {
                            let url = "/pages/roomInfo/roomInfo?id=" + item.mid
                            return (

                                <AtListItem
                                    title={item.name}
                                    arrow='right'
                                    note={"面积：" + item.area + " | " + "投影仪：" + (() => { if (item.projector) { return "可用" } else { return "不可用" } })() + " | " + "网络：" + (() => { if (item.wifi) { return "可用" } else { return "不可用" } })()}
                                    onClick={() => {
                                        Taro.navigateTo({
                                            url: url,
                                        })
                                    }}
                                />
                            )
                        })
                    }
                </AtList>

            </>
        )
    }

}
export default roomList;